<template>
  <div class="labelne">
    <van-nav-bar title="标题" left-text="返回" left-arrow>
        <template #left>
            <span class="iconfont iconnew"></span>
        </template>
        <template #title>
            <div class="search-box" @click="$router.push('/searchPage')">
                <van-icon name="search" size="18" />
                <span>搜索</span>
            </div>
        </template>
        <template #right>
        <!-- //点击跳转personal页面 -->
        <van-icon name="manager-o" size="25" color="#fff" @click="$router.push('/personal')"/>
        </template>
    </van-nav-bar>
    <van-icon name="add-o" size='50px' @click="$router.push('/Labelmanagement')"/>
    <van-tabs v-model="curIndex" sticky @click="getPageId">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
                  v-model="Loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                  :immediate-check="false"
                >
                    <!-- 标签 -->
                    <van-tab v-for="item in list" :key="item.id" :title="item.name">
                        <!-- 对应标签内容 -->
                        <newsItem @click.native="toDetail(item.id)" v-for="item in newArr" :key="item.id" :obj="item"></newsItem>
                    </van-tab>
            </van-list>
        </van-pull-refresh>  
    </van-tabs>
    
  </div>
</template>

<script>
import { category, newList } from '@/api/new'
export default {
    data(){
        return{
            list:[],
            curIndex:1,
            newArr:[],
            isLoading:false,
            pageIndex:1,
            pageSize:8,
            Loading:false,
            finished:false
        }
    },
    created(){
        category().then((res)=>{
            this.list=res.data.data
            this.getNewList()
        })
    },
    methods:{
        getPageId(value){
          this.curIndex=value
          console.log()
          newList({category:value}).then(res=>{
              this.newArr=[]
              this.newArr=res.data.data
          })
        },
        toDetail(id){
            this.$router.push({
                path:'/articleDetail',
                query:{
                    id
                }
            })
        },
        onLoad(){
            this.Loading=false
            this.pageIndex++
            this.getNewList()
        },
        onRefresh(){
            this.pageIndex=1,
            this.newArr=[],
            this.finished=false
            this.getNewList()
            setTimeout(() => {
                this.isLoading = false;
                this.$toast('刷新成功');
            }, 1000);
        },
        getNewList(){
            console.log('88',this.curIndex);
            newList({
                category:this.list[this.curIndex].id,
                pageIndex:this.pageIndex,
                pageSize:this.pageSize
            }).then((res)=>{
                this.newArr=[...this.newArr,...res.data.data]
                if(res.data.data.length<this.pageSize){
                    this.finished=true
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>

    /deep/.van-nav-bar{
    background-color: red;
    .iconnew{
        color: #fff;
        font-size: 50px;
    }
    .van-nav-bar__title{
        width: 60%;
        .search-box{
            width: 100%;
            height: 30px;
            line-height: 36px;
            text-align: center;
            background: rgba(255,255,255,0.4);
            color: #fff;
            border-radius: 20px;
            .van-icon-search{
                color: #fff;
            }
        }
    }
    /deep/.single2{
        margin-bottom: 50px;
    }
    /deep/#pasition{
        position: absolute;
        top: 0;
        right: 0;
    }
}
</style>